<template>
	<div class="upPic">
        <div class="upload-list" v-for="(pic,index) in pics">
            <img :src="pic.url">
            <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(pic.url)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handlePicRemove(index)"></Icon>
            </div>
        </div>
        <div class="upload-list" v-if="percent>0">
            <IProgress  :percent="percent" hide-info ></IProgress>
        </div>
        <Upload 
            action="/admin/upload/pic"
            :data="updata"
            :show-upload-list="false"
            :format="['jpg','jpeg','png']"
            :max-size="maxsize"
            multiple
            type="drag"
            name="pic"
            :before-upload="handleBefore"
            :on-progress="onProgress"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="camera" size="20"></Icon>
            </div>
        </Upload>
        <Modal title="图片" v-model="modal.show" :transfer="transfer">
            <img :src="modal.src"  style="width: 100%">
        </Modal>  
    </div>
</template>
<script>
    import Progress  from 'iview/src/components/progress';
    import Icon from 'iview/src/components/icon';
    import Upload  from 'iview/src/components/upload';
    import Modal from 'iview/src/components/modal';

	export default{
        props :{
            MaxPicCount :{
                type : Number,
                default : 1,
            },
            area : {
                type : String,
                default : 'pic'
            },
            callback :{
                type : Function,
            }
        },
        components:{
            Icon,
            'IProgress' :Progress,
            Upload,
            Modal,
        },
        data () {
            return {
                updata : {
                    _token : window.document.getElementsByTagName('meta')['csrf-token'].getAttribute('content'),
                    fileArea : this.area,
                },
                pics : [],
                maxsize : 2048,
                percent : 0,
                modal : {
                    show : false,
                    src : '',
                },
                transfer : false,
            }
        },
        methods: {
            handleBefore (){
                if(this.pics.length>=this.MaxPicCount){
                    this.$Notice.error({
                        title: '图片最多上传'+this.MaxPicCount+'张',
                    });
                    return false;
                }
            },
            //上传成功
            handleSuccess (res, file) {
                this.percent = 0;
                if(res.code==1){
                    this.$Notice.error({
                        title: '图片上传失败',
                        desc: '原因：'+res.msg
                    });
                    return false;
                }
                var data = res.data;
                //远程链接调用远程地址
                if(data.isRemote==1){
                    this.pics.push({url:data.remoteUrl});
                }else{
                    this.pics.push({url:data.url+data.fileName});
                }
                this.callback(this.pics);
            },
            //上传错误
            handleError(error,file,fileList){
                this.$Notice.error({
                    title: '图片上传失败',
                    desc: '原因：'+error
                });
                this.percent = 0;
            },
            //文件格式错误
            handleFormatError (file) {
                this.$Notice.error({
                    title: '图片上传失败',
                    desc: "只允许上传'.jpg','.jpeg','.png' 类型图片文件"
                });
                this.percent = 0;
            },
            //上传最大大小
            handleMaxSize (file) {
                this.$Notice.error({
                    title: '图片上传失败',
                    desc: "图片过大,不能超过"+this.maxsize/1024+'mb'
                });
                this.percent = 0;
            },
            //上传中
            onProgress(event, file, fileList){
                this.percent = event.percent;
            },
            //图片查看
            handleView (src) {
                this.modal.src = src;
                this.modal.show = true;
            },
            //删除图片
            handlePicRemove (index) {
                this.pics.splice(index, 1);
                this.callback(this.pics);
            },
        },
        created:function(){
            
        },
        mounted:function(){

        },
    }
</script>
<style>
    .upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .upload-list img {
        width: 100%;
        height: 100%;
    }
    .upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .upload-list:hover .upload-list-cover {
        display: block
    }
</style>